import React from 'react';
import { Checkbox } from 'antd'
import {observer} from 'mobx-react';
import { WeaLocaleProvider } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class Header extends React.Component {

  constructor() {
    super();
    this.state= {
      allowGetArrFlag: true,
    }
  }

  allBtnChange = (e) => {
    const { smartGuessStore } = this.props;
    const { setState, setRecordClicked, setIframeSrc } = smartGuessStore;
    setRecordClicked('all-btn-click');
    setIframeSrc();
    setState({allMapshow: e.target.checked})
  }
  smartBtnClick() {
    const { smartGuessStore } = this.props;
    const { setState, 
            smartGuessStatus, 
            getCellArr, 
            setRecordClicked, 
            getForecastInfo, 
            justdoOnce,
          } = smartGuessStore;
    if(justdoOnce) {
      setState( {
        justdoOnce: false,
        needBtnMask: true
      })
      getForecastInfo(); //请求之前预测者信息
      getCellArr(); 
    }
    setRecordClicked('smart-btn-click');
    setState({smartGuessStatus: !smartGuessStatus,
              allMapshow: false});
    
  }
  //设置操作者信息面板隐藏
  setPanelVisible = () => {
    const { setHiddenSelectPanel } = this.props.smartGuessStore;
    setHiddenSelectPanel();
    let obj = document.getElementById('wfFrontOperator-container');
    if(obj) {
      obj.style.visibility = 'hidden';
    }
  } 
 
  render (){
    const{ smartGuessStore } = this.props;
    const { smartGuessStatus,allMapshow, needBtnMask, needForecastFunc} = smartGuessStore;
   return  (
      <div className=  "wf-map-header" onClick={this.setPanelVisible}>
        {
          needForecastFunc 
          && [ 
              <div className={!smartGuessStatus? "wfmap-btn smart-btn" : "wfmap-btn smart-btn active"} 
                    onClick={() => {this.smartBtnClick()}}>
                    <i className="icon-coms02-coms-Intelligent-prediction1" style={{fontSize: '15px'}}/>
                    <span>{getLabel(515100, '智能预测')}</span>
              </div>
              ,<div className={smartGuessStatus ? 'descript-word-show': 'descript-word-hidden'}>
                  <div className="wfmap-btn all-btn">
                    <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@ksek6g@allView`} 
                      checked={allMapshow} 
                      disabled={needBtnMask ? true : false}
                      onChange={this.allBtnChange}>
                      {getLabel(515101,'完整视图')}
                    </Checkbox>
                  </div>
                  <div className="descript-words-box">
                    <span className="words">
                      <i className="icon-coms-Tile-o" />
                      {getLabel(515103, '可能会到达的节点')}
                    </span>
                    <span className="words">
                    <span className='line'>
                      <i className="icon-coms-organization-right" />
                    </span>
                    {getLabel(515264, '可能会经过的出口')}
                    </span>
                  </div>
            </div>
          ]
        }
        <div className={(!smartGuessStatus || !needForecastFunc) ? 'descript-word-show wf-map-descript-word': 'descript-word-hidden'}>
          <div className='content-wrap'>
            <span className='passed-node'></span>
            <p>{getLabel(515108, '已经过的节点')}</p>
          </div>
          <div className='content-wrap'>
            <span className='not-pass-node'></span>
            <p> {getLabel(515105, '未经过节点')}</p>
          </div>
          <div className='content-wrap'>
            <span className='current-node'></span>
            <p>{getLabel(515106, '当前节点')}</p>
          </div>
          <div className='content-wrap'>
            <span className='auto-pass-node'></span>
            <p>{getLabel(515107, '异常跳过的节点')}</p>
          </div>
          <div className='content-wrap'>
            <span className='arrow passed-exit'>
            <i className="icon-coms-organization-right" />
            </span>
            <p>{getLabel(515277, '已经过的出口')}</p>
          </div>
          <div className='content-wrap'>
            <span className='arrow not-pass-exit'>
            <i className="icon-coms-organization-right" />
            </span>
            <p> {getLabel(515117, '未经过的出口')}</p>
          </div>
        </div>
    </div>)
  }
}